<template>
  <div class="chart-container">

    <!--
    indicator-position:outside/none/— 是否显示指示器
    -->
    <el-carousel :interval="5000"
                 arrow="hover"
                 indicator-position="none"
                 type="card"
                 :autoplay="true"
                 :initial-index="0"
                 :loop="true"
                 :height="chartWidth">

      <el-carousel-item v-for="(obj,i) in chartList" :key="obj.chartId">
        <img :src="obj.chartUrl" alt="" title="点我去链接" style="width:100%;height:100%;" @click="go(obj)">
      </el-carousel-item>

    </el-carousel>

  </div>
</template>

<script>
export default {
  //组件名称
  name: "Chart",
  //组件注册
  components: {},
  //数据驱动
  data() {
    return {
      chartList: [{
        chartId: "",
        chartUrl: "",
        linkUrl: ""
      }]
    }
  },
  //计算属性
  computed: {
    chartWidth() {
      return window.screen.width * 0.24 * 0.70 + "px"
    }
  },
  //数据监听
  watch: {},
  //方法
  methods: {
    go(obj) {
      window.open(obj.linkUrl, "_blank")
    }
  },
  //钩子函数
  mounted() {
  },
  created() {
    this.axios.get(`/chart/web/charts`)
        .then((data) => {
          this.chartList = data.data;
        })
  }
}
</script>

<style lang="less" scoped>
.chart-container {
  min-width: 1200px;
  width: 1200px;
  margin: 15px auto;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>